<template>
<div class="wrap">
	<h3>我的消息</h3>
	<table align='center' style="border-collapse:collapse;">
			<tr class="title"><th>标题</th><th>发送时间</th><th>状态</th><th>操作</th></tr>
			<tr class="content" v-for="(item,index) in news" ><td>{{item.title}}</td><td>{{item.time}}</td><td>{{item.state}}</td><td @click="del(index)"><i>{{item.view}}</i> {{item.delet}}</td></tr>
	</table>
</div>
</template>

<script>
	export default{
		name:"mynews",
		data(){
			return{
				news:[]
//				news:[{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"},{title:"你的货物已发货你的货物已发货你的货物已发货",time:"2015年9月23日 16:20:10",state:"未查看",view:"查看",delete:"删除"}]
			}
		},
		methods:{
			del(index){
//				console.log(this.news[index].id);
				var newsid = this.news[index].id;
				var _this = this;
				this.axios.get("/api/news",{params:{id:newsid}}).then(function (data) {	
						if(data.data.err == 1){
							_this.news.splice(index,1);
							alert("消息删除成功");
						}else{
							alert("消息删除失败");
						}
					})
		    
				
			}
		},
		mounted:function(){
			var _this = this;
			this.axios.get("/api/mynews").then(function (data) {
					_this.news = data.data;
					})
		}
	}
</script>

<style scoped>
.wrap{
	width: 1085px;
	height: 623px;
	border: 1px solid rgb(242,242,242);	
}
h3{
	font-weight: 400;
	font-size: 18px;
	color: rgb(123,123,123);
	text-indent: 22px;
	line-height: 58px;
	border-bottom: 1px solid rgb(242,242,242);	
}
table{
	margin: 21px;
	border: 1px solid  rgb(242,242,242);
	width: 1040px;
	outline: none;
}
.title{
	background-color: rgb(242,242,242);
	color: rgb(123,123,123);
	line-height: 46px;
	font-weight: 100;
}
th{
	font-size: 16px;
}
.content{
	line-height: 54px;
	border-bottom: 1px solid  rgb(242,242,242);
}
td{
	font-size: 14px;	
	text-align: center;
	color: rgb(123,123,123);
}
.content>td:nth-child(4){
	color: rgb(121,181,121);
}
.content:hover{
	background-color: rgb(243,255,243);
}
.content i{
	display: inline-block;
	line-height: 14px;
	font-style: normal;
	border-right: 1px solid rgb(123,123,123);
	padding-right: 5px;
}
</style>